<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">   
    <title>登录</title> 
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">	
	<!-- 引入jQuery -->	
	<script src="${pageContext.request.contextPath}/js/jquery-1.7.2.js"></script>
	<!-- 引入滑动验证的js和css -->
	<script src="${pageContext.request.contextPath}/js/jquery.slideunlock.js"></script>
	<link href="${pageContext.request.contextPath}/css/slide-unlock.css" rel="stylesheet">   	
	
<style type="text/css">
/* id选择器 */
#div01{   
	    width:400px; 
		height:180px;
		border:1px solid red;
		margin-top:200px;
		margin-left:500px;
	}
/* class选择器*/
.class01{
       margin-top:39px;
	   margin-left:84px;
    }
</style>

<script type="text/javascript">
    $(function(){
       alert("页面加载时执行...")
       //滑动验证判断
        var slider = new SliderUnlock("#slider",{
			successLabelTip : "欢迎登陆"	
		 },function(){
			alert("验证成功");
	     });
	    slider.init();     
    });
               
   //登陆验证
   function Verification(){
     var userName=$("#userName").val();
     var userPass=$("#userPass").val();
     var checkCode=$("#checkCode").val(); 
     //设置保存cookie的时间
     var logintime="3600";      
     if(userName=="" || userPass==""){
        alert("账号或密码不能为空")
     }else if(checkCode==""){    
        alert("验证码不能为空")
     }else{      
	     $.post("login/loginVerification.htm",{userName:userName,userPass:userPass,checkCode:checkCode,logintime:logintime},function(data){
	         if(data=="1"){ 
	            alert("登陆成功")
	            //得到ID为from的DOM节点,并对DOM节点的action属性赋值
	            $("#form").attr("action","login/jumpHomePage.htm");
	            $("#form").submit();       
	          }else if(data=="2"){
	              alert("验证码错误")
	          }else{
	              alert("账号或密码错误")	          
	          }       
	     });		     
	/*
	        $.ajax({
	          type:"post",
	          url:"login/loginVerification.htm",
	          data:{userName:userName,userPass:userPass},
	          async:false,
	          dataType:"json",
	          success:function(data){
		          if(data=="1"){ 
		           alert("登陆成功")
		           $("#form").attr("action","login/JumpHomePage.htm");
		            $("#form").submit();       
		          }else{
		              alert("账号或密码错误")
		          }
	          }
	        });
	 */  		     
     }    
  }        
   
   //得到验证码
    function getVerifyCode(){
         var imgNode = document.getElementById("vimg");                    
	     imgNode.src = "util/verifyCodeServlet?t=" + Math.random();  // 防止浏览器缓存的问题       
    }
</script>
			
  </head>
<body>
      <div id="div01">
	       <form id="form" class="class01" method="post" action="">       
	             <input type="text"     placeholder="账号"  id="userName" name="userName" style="width:250px;height:25px"> 
	             <br/>                 
	             <input type="password" placeholder="密码"  id="userPass" name="userPass" style="width:250px;height:25px">
	             <br/> 
	             <input type="text" placeholder="验证码"  id="checkCode" name="checkCode"  style="width:86px;height:25px" />
	              <img   id="vimg"  align="middle" src="util/verifyCodeServlet" onclick="getVerifyCode()" style="width:86px; height:25px;" >  
                  <a href="" onclick="getVerifyCode()"> 看不清,换一个</a>  	             
	             <br/>
	             <!-- button 提交页面不刷新页面 -->
	             <!-- submit 提交页面刷新页面 -->
	             <input type="button" id="login" name="login" value="登录" onclick="Verification()">
	       </form>                                                       <!-- 事件onclick:用户点击 HTML元素时执行 -->  
       </div>

	   <div id="slider">
		    <div id="slider_bg"></div>
		    <span id="label">>></span> <span id="labelTip">拖动滑块验证</span> 		    
	   </div>

       
                      
</body>
</html>
